<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />
		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />
		
		<!-- 本页面css -->
		<link rel="stylesheet" href="css/autonym.css" />
		
	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="orderSubmit-wrapper table-wrapper section" v-cloak>
			<div class="orderSubmit-content-wrapper table-content-wrapper">
				<div class="serverListNav">
					<span class="nav-item">总览</span>
					<span class="nav-item">实名认证</span>
				</div>

				<div class="form-wrapper">
					<div class="from-title-wrapper">
						<span class="from-title">实名认证</span>
					</div>
					<div class="form-wrapper-content">
						<div class="data-container">
							<div class="yz-type-title">
								<div :class="{'step-cur':realnameCurrentStep > 0}" class="yz-step step1 step-cur">
									<div class="icon-item">
									</div>
									<p class="h-sort">Step.1</p>
									<p class="p-sort">填写认证资料</p>
								</div>

								<div :class="{'step-cur':realnameCurrentStep > 1}" class="yz-step step2">
									<div class="icon-item"></div>
									<p class="h-sort">Step.2</p>
									<p class="p-sort">提交资料审核</p>
								</div>


								<div :class="{'step-cur':realnameCurrentStep > 2}" class="yz-step step4">
									<div :class="{'fail': (auditResult === 'fail' && realnameCurrentStep === 3)}" class="icon-item"></div>
									<p :style="{'color':(auditResult === 'fail' ? '#F21C30' :'' )}" class="h-sort">Step.3</p>
									<p :style="{'color':(auditResult === 'fail' ? '#F21C30' :'' )}" class="p-sort">认证结果</p>
								</div>
							</div>

							<div v-if="realnameCurrentStep === 1" class="el-form-wrapper">
								<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="135px" class="demo-ruleForm">
									<el-form-item label="用户类型：" prop="userId">
										<div @click="ruleForm.userType = 'personage'" :class="{'deep': ruleForm.userType === 'personage'}" class="yzButton mr-10">个人用户</div>
										<div @click="ruleForm.userType = 'company'" :class="{'deep': ruleForm.userType === 'company'}" class="yzButton">企业用户</div>
									</el-form-item>

									<div>
										<el-form-item v-if="ruleForm.userType === 'personage'" label="证件类型：" prop="cardTypeId">
											<el-select style="width: 320px;" v-model="ruleForm.cardTypeId" placeholder="请选择证件类型">
												<el-option v-for="(item,index) in ruleForm.cardTypeGroup" :key="item.id" :label="item.label" :value="item.id"></el-option>
											</el-select>
										</el-form-item>
										
										<el-form-item v-if="ruleForm.userType === 'personage'" label="证件号码：" prop="cardNum">
											<el-input maxLength="50" style="width: 320px;" v-model="ruleForm.cardNum" placeholder="请输入证件号码"></el-input>
										</el-form-item>
										
										<el-form-item v-if="ruleForm.userType === 'personage'" label="姓名：" prop="username">
											<el-input maxLength="20"  style="width: 320px;" v-model="ruleForm.username" placeholder="请输入姓名"></el-input>
										</el-form-item>
									</div>

									<div v-if="ruleForm.userType === 'company'">
										<el-form-item v-if="ruleForm.userType === 'company'" label="公司名称：" prop="companyName">
											<el-input style="width: 320px;" v-model="ruleForm.companyName" placeholder="请输入公司名称"></el-input>
										</el-form-item>
										
										<el-form-item v-if="ruleForm.userType === 'company'" label="法人姓名：" prop="legalPerson">
											<el-input style="width: 320px;" v-model="ruleForm.legalPerson" placeholder="请输入法人姓名"></el-input>
										</el-form-item>
										
										<el-form-item v-if="ruleForm.userType === 'company'" label="营业执照号码：" prop="businessLicenseNum">
											<el-input style="width: 320px;" v-model="ruleForm.businessLicenseNum" placeholder="请输入营业执照号码"></el-input>
										</el-form-item>
										
										<el-form-item v-if="ruleForm.userType === 'company'" label="法人身份证号码：" prop="legalPersonCardNum">
											<el-input style="width: 320px;" v-model="ruleForm.legalPersonCardNum" placeholder="请输入法人身份证号码"></el-input>
										</el-form-item>
									</div>
								</el-form>
							</div>
							
							
							<div class="el-form-wrapper" v-if="realnameCurrentStep === 2">
								<el-form :model="ruleForm"  ref="ruleForm" label-width="135px" class="demo-ruleForm">
							
									<div v-if="ruleForm.userType === 'personage'">
										
										<el-form-item v-if="ruleForm.userType === 'personage'" label="证件类型：" >
											<span>{{handlePersonageCardType()}}</span>
										</el-form-item>
										
										<el-form-item v-if="ruleForm.userType === 'personage'" label="证件号码：" >
											<span>{{ruleForm.cardNum}}</span>
										</el-form-item>
										
										<el-form-item v-if="ruleForm.userType === 'personage'" label="姓名：" >
											<span>{{ruleForm.username}}</span>
										</el-form-item>
									</div>
							
									<div v-if="ruleForm.userType === 'company'">
										<el-form-item v-if="ruleForm.userType === 'company'" label="公司名称：" prop="companyName">
											<span>{{ruleForm.companyName}}</span>
										</el-form-item>
										
										<el-form-item v-if="ruleForm.userType === 'company'" label="法人姓名：" prop="legalPerson">
											<span>{{ruleForm.legalPerson}}</span>
										</el-form-item>
										
										<el-form-item v-if="ruleForm.userType === 'company'" label="营业执照号码：" prop="businessLicenseNum">
											<span>{{ruleForm.businessLicenseNum}}</span>
										</el-form-item>
										
										<el-form-item v-if="ruleForm.userType === 'company'" label="法人身份证号码：" prop="legalPersonCardNum">
											<span>{{ruleForm.legalPersonCardNum}}</span>
										</el-form-item>
									</div>
								</el-form>
							</div>
							
							<div v-if="realnameCurrentStep !== 3" class="card-wrapper">
								<el-row :gutter="15" v-show="ruleForm.userType === 'personage'">
									<el-col class="el-col" :span="8">
										<div class="card-item"  @click="submitPhoto(0,'personage')">
											<div class="img-wrapper"></div>
											<span class="font">上传证件照正面</span>
										</div>
									</el-col>
									<el-col class="el-col" :span="8">
										<div class="card-item" @click="submitPhoto(1,'personage')">
											<div class="img-wrapper"></div>
											<span class="font">上传证件照反面</span>
										</div>
									</el-col>
									<el-col class="el-col" :span="8">
										<div class="card-item" @click="submitPhoto(2,'personage')">
											<div class="img-wrapper"></div>
											<span class="font">上传手持证件照</span>
										</div>
									</el-col>
								</el-row>
								
								<el-row :gutter="15" v-show="ruleForm.userType === 'company'">
									<el-col class="el-col" :span="8">
										<div class="card-item" @click="submitPhoto(0,'company')">
											<div class="img-wrapper"></div>
											<span class="font">法人证件照正面</span>
										</div>
									</el-col>
									<el-col class="el-col" :span="8">
										<div class="card-item" @click="submitPhoto(1,'company')">
											<div class="img-wrapper"></div>
											<span class="font">法人证件照反面</span>
										</div>
									</el-col>
									<el-col class="el-col" :span="8">
										<div class="card-item" @click="submitPhoto(2,'company')">
											<div class="img-wrapper"></div>
											<span class="font">营业执照</span>
										</div>
									</el-col>
								</el-row>
								
								<p class="card-desc  mt-20">
									上传的图片支持的格式有：jpg，bmp，png，gif；
								</p>
							</div>
							
							<div v-if="realnameCurrentStep === 3" class="result-wrapper">
								<img  v-if="auditResult === 'auditing'" src="img/auditing.png" />
								<img  v-if="auditResult === 'success'" src="img/audit-success.png" />
								<img  v-if="auditResult === 'fail'" src="img/audit-fail.png" />
								<div class="result-content">
									<p class="desc" v-if="auditResult === 'auditing'">感谢您对我们工作的支持，我们正在飞速为您审核...</p>
									<p class="successDesc" v-if="auditResult === 'success'">恭喜您完成衡天云实名认证</p>
									<div class="failwrapper" v-if="auditResult === 'fail'">
										<p class="successDesc">认证失败</p>
										<p class="mt-20" style="color: #777777;"><span style="color:#F21C30;">失败原因： </span>信息填写不全，请您填写完整的信息，再次 <span @click="refreshPage" style="color: #6462F3;cursor: pointer;text-decoration: underline;"> 实名认证</span></p>
									</div>
									
								</div>
								<div v-if="auditResult !== 'fail'" @click="gotoHome" class="yzButton lightToDeep">返回</div>
								<div v-if="auditResult === 'fail'"  @click="refreshPage" class="yzButton deep">重新认证</div>
								
							</div>
							
							<div v-show="realnameCurrentStep === 1"  @click="submitForm('ruleForm')" class="yzButton nextstep deep">下一步</div>
							<div v-show="realnameCurrentStep === 2" class="button-wrapper step fboxRow">
								<div @click="realnameCurrentStep = 1" class="yzButton lightToDeep mr-10">上一步</div>
								<div @click="submitDatum" class="yzButton deep">提交资料</div>
							</div>

							<ul class="explain-wrapper">
								<li class="title">温馨提示：</li>
								<li class="explain-item">1. 必须使用自己真实的身份信息，不然会认证失败</li>
								<li class="explain-item">2. 使用的身份信息必须和自己的手机号相对应，如果不对应请使用自己对应的手机号</li>
								<li class="explain-item">3. 我们会对您的身份信息进行加密保存，您不用担心信息泄露的风险</li>
								<li class="explain-item">4. 实名认证之后可领取优惠券</li>
							</ul>

						</div>
					</div>
				</div>
			</div>


		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.orderSubmit-wrapper',
				data: function() {
					return {
						// 新增 
						realnameCurrentStep: undefined, // 实名认证 目前的步骤是进行到第几步
						initruleForm:{  // 原始表单数据
							
						},
						ruleForm: {
							userType: 'personage', // 1. 个人 'personage' 2.企业 'company' 
							cardTypeGroup: [{ // 证件类型可选  身份证，护照，回乡证，台胞证
								id: 1,
								label: '身份证'
							}, {
								id: 2,
								label: '护照'
							}, {
								id: 3,
								label: '回乡证'
							},{
								id: 4,
								label: '台胞证'
							}],
							cardTypeId: 1, // 选中的证件类型  默认展示身份证
							cardNum: undefined, // 证件号码
							username: undefined, // 个人用户名称
							companyName: undefined, // 公司名称
							legalPerson: undefined, // 法人姓名
							businessLicenseNum: undefined, // 营业执照号码
							legalPersonCardNum: undefined // 法人身份证号码
						},
						rules: {
							cardTypeId: [{
								required: true,
								message: '请选择证件类型',
								trigger: 'select'
							}],
							cardNum:[{
								required: true,
								message: '请输入证件号码',
								trigger: 'blur'
							}],
							username:[{
								required: true,
								message: '请输入姓名',
								trigger: 'blur'
							}],
							companyName:[{
								required: true,
								message: '请输入公司名称',
								trigger: 'blur'
							}],
							legalPerson:[{
								required: true,
								message: '请输入法人姓名',
								trigger: 'blur'
							}],
							businessLicenseNum:[{
								required: true,
								message: '请输入营业执照号码',
								trigger: 'blur'
							}],
							legalPersonCardNum:[{
								required: true,
								message: '请输入法人身份证号码',
								trigger: 'blur'
							}],
							
						},
						personagePhotoActive: undefined, // 个人照片高亮步骤
						companyPhotoActive: undefined, // 公司照片高亮步骤
						auditResult: undefined , // 审核结果  auditing  正在审核   success  成功  fail  失败
					}
				},

				methods: {
					// 重新认证
					refreshPage: _throttle(function() {
						// 初始化
						this.auditResult = undefined
						this.ruleForm = this.initruleForm
						this.realnameCurrentStep = 1
					}), 
					
					// 返回到总览页面
					gotoHome: _throttle(function() {
						window.open('../home/index.html' ,'_self')
					}), 
					
					// 处理证件类型
					handlePersonageCardType: function() {
						let that = this
						if(this.ruleForm.cardTypeGroup  && this.ruleForm.cardTypeGroup.length > 0) {
							let label
							this.ruleForm.cardTypeGroup.forEach(function(item) {
								if(item.id === that.ruleForm.cardTypeId) {
									label = item.label
								}
							})
							return label
						}
						return ''
					},
					
					// 提交表单
					submitForm: _throttle(function(formName) {
						let that = this
						this.$refs[formName].validate(function(valid) {
							if (valid) {
								console.log('进入到下一步审核')
								that.realnameCurrentStep = 2
							} else {
								return false;
							}
						})
					}),
					
					// 提交照片的方法
					submitPhoto:_throttle(function(index,type){
						console.log(index,type)
					},100),
					
					// 提交资料的方法
					submitDatum:_throttle(function(index,type){
						console.log(' 提交资料的方法')
						this.realnameCurrentStep = 3
						
						// 这里是模拟审核结果
						if(this.ruleForm.username === '123') {
							this.auditResult = 'success'
						}
						
						else if(this.ruleForm.username === '12345') {
							this.auditResult = 'auditing'
						} else {
							this.auditResult = 'fail'
						}
						
						
					
					}),

				},
				mounted: function() {
					// 原始表单数据赋值
					this.initruleForm =  deepCopy(this.ruleForm)
					
					// 模拟后台数据  1为 步骤1
					this.realnameCurrentStep = 1
					

				}

			})
		</script>
	</body>
</html>
